<!--
 * @Author: ranjianglai
 * @Date: 2023-01-13 17:28:13
 * @Description: 今日推荐
-->


<template>
    <view class="type-area cus-page">
        <!-- 导航栏 -->
        <ct-navbar leftIconType="back" :search="{show:true}" @search="search" /> 
        <view class="top" :style="{top:topSecurityDistance+'px'}">
            <ct-scroll-x bgColor="linear-gradient(to right, #F5F3FD ,#F3F7FD,#EEFDFE,#EEFDFE)" 
                :tab="subsections" :current="current" @cutTab="cutTab" >
            </ct-scroll-x>
            <view class="type-area com-flex com-row-between com-p-t-12 com-p-b-20"
                style="background:linear-gradient(to right, #F5F3FD ,#F3F7FD,#EEFDFE,#EEFDFE)">
                <view class="com-flex btns">
                    <view :class="['btn left', tabCurrent == 0 ? 'left-active' : '' ]" @tap="tabCurrent=0">日元</view>
                    <view :class="['btn right', tabCurrent == 1 ? 'right-active' : '' ]" @tap="tabCurrent=1">人名币</view>
                </view> 
                <view class="com-flex" @tap="popupShow=!popupShow">
                    <text :class="['com-m-r-8',popupShow ? 'com-active-color': null]">筛选</text>
                    <u-icon name="grid" size="36rpx" :color="popupShow ? '#02BDF3': '#212122'"></u-icon>
                </view>
            </view>
        </view>
        <!-- 顶部安全距离 -->
        <u-gap height="170rpx" bgColor="transparent"></u-gap>

        <!-- 列表 -->
        <ct-list-n :column="3" />

        <!-- 筛选弹出层 -->
        <u-popup :show="popupShow"
            round="24rpx">
            <view class="popup-box">
                <view class="com-flex com-row-between">
                    <view class="com-m-r-36"></view>
                    <text class="com-font-32 com-font-bold">筛选</text>
                    <u-icon name="close" size="36rpx" bold color="#666" @tap="popupShow=false"></u-icon>
                </view>
                <view class="com-m-t-56">
                    <text>价格范围</text>
                    <text class="com-minor-color">(日元)</text>
                    <view class="com-m-t-24 com-flex com-row-center">
                        <input class="uni-input" type="number" :value="form.minPrice" placeholder="输入最低价格" />
                        <text style="color:#f6f6f6;margin:0 2px">—</text>
                        <input class="uni-input" type="number" :value="form.maxPrice" placeholder="输入最高价格" />
                    </view>
                </view>
                <view v-for="(tem,ind) in screen" :key="ind" class="com-m-t-56">
                    <text>{{tem.title}}</text>
                    <view class="com-flex com-flex-wrap">
                        <view v-for="(item,index) in tem.list" :key="index" @tap="cutScreenClass(tem.type,index)"
                            :class="['com-m-t-20 com-m-r-10 item',index==form[tem.type] ? 'item-active' : null]">
                            {{item}}
                        </view>
                    </view>
                </view> 
                <view class="com-m-t-56 com-flex buttons">
                    <view class="button left" @tap="clickButton(0)">重置</view>
                    <view class="button right" @tap="clickButton(1)">确定</view>
                </view> 
            </view>
		</u-popup>

        <!-- 底部间隙 -->
        <u-gap height="30rpx" bgColor="transparent"></u-gap>
    </view>
</template>


<script>
export default {
    name: 'recommend',
    components: {},
    props: {},

    data() {
        return {
            topSecurityDistance: 44,
            subsections: ["综合排序","最新","价格由高到低","价格由低到高"],
            current: 0,
            tabCurrent: 0,
            // 筛选弹出层
            popupShow: false,
            screen: [
                {
                    title: "商品类别",
                    type: "type",
                    list: ["全部","模玩手办","潮玩艺术","盲盒","桌游卡牌","宝可梦","卡牌周边","潮流装备"]
                },
                {
                    title: "流通品相",
                    type: "phase",
                    list: ["全部","新品","九成新","新品未使用","五成新"]
                },
                {
                    title: "运费",
                    type: "freight",
                    list: ["全部","免运费"]
                }
            ],
            // 表单数据
            form:{
                minPrice: "",
                maxPrice: "",
                type: 0,
                phase: 0,
                freight: 0,
            }
        };
    },

    computed: {},
    watch: {},

    onLoad(){
        this.setTop();
    },

    methods: {
        // 设置顶部安全距离
        setTop(){
            const sysInfo = this.mixinGetSysInfo();
            // #ifdef MP-WEIXIN
            this.topSecurityDistance = sysInfo.statusBarHeight + sysInfo.capsule.navBarH;
            // #endif
            // #ifdef APP-PLUS
            this.topSecurityDistance = sysInfo.statusBarHeight + 44;
            // #endif
        },

        // 搜索
        search(e){
            console.log("搜索",e.keyword)
        },

        // 切换
        cutTab(e){
            this.current = e.i
        },

        // 切换筛选类目
        cutScreenClass(type,index){
            this.form[type] = index;
        },

        // 点击筛选按钮
        clickButton(type){
            if(type==0){
                this.form = {
                    minPrice: "",
                    maxPrice: "",
                    type: 0,
                    phase: 0,
                    freight: 0,
                }
            }else{
                this.popupShow = false;
            }
        }
    },

    created() { },
    mounted() { },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    activated() { },
}
</script>


<style lang='scss' scoped>
    .top{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .btns{
        .btn{
            width: 110rpx;
            height: 48rpx;
            background: #F1F1F1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            color: #666;
        }
        .left{
            border-radius: 24rpx 0px 0px 24rpx;
            &-active{
                background: #02BDF3;
                color: #fff;
            }
        }
        .right{
            border-radius: 0 24rpx 24rpx 0;
            &-active{
                background: #FF558F;
                color: #fff;
            }
        }
    }
    .popup-box{
        padding: 32rpx;
        .uni-input{
            width: 320rpx;
            height: 64rpx;
            background: #F6F6F6;
            border-radius: 32rpx;
            text-align: center;
            font-size: 28rpx;
        }
        .item{
            width: 216rpx;
            height: 64rpx;
            background: #F6F6F6;
            border: 1px solid #F6F6F6;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            &:nth-child(3n){
                margin-right: 0;
            }
            &-active{
                border: 1px solid #02BDF3;
                color: #02BDF3;
                background: #fff;
            }
        }
        .buttons{
            .button{
                width: 50%;
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
            }
            .left{
                border: 1px solid #02BDF3;
                border-right: 0;
                background: #fff;
                border-radius: 40rpx 0 0 40rpx;
                color: #02BDF3;
            }
            .right{
                background: linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%);
                border-radius: 0 40rpx 40rpx 0;
                color: #fff;
            }
        }
    }
</style>